<template>  
  <div>  
    <!-- 假设有一个表单用于添加书籍 -->  
    <form @submit.prevent="addBook">  
      <!-- 表单字段 -->  
      <input v-model="bookForm.title" type="text" placeholder="Title" required>  
      <input v-model="bookForm.author" type="text" placeholder="Author" required>  
      <input v-model.number="bookForm.copies" type="number" placeholder="Copies" required>  
      <button type="submit">Add Book</button>  
    </form>  
  
    <!-- 书籍列表 -->  
    <table>  
      <thead>  
        <tr>  
          <th>ID</th>  
          <th>Title</th>  
          <th>Author</th>  
          <th>Copies</th>  
          <th>Actions</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr v-for="book in books" :key="book.id">  
          <td>{{ book.id }}</td>  
          <td>{{ book.title }}</td>  
          <td>{{ book.author }}</td>  
          <td>{{ book.copies }}</td>  
          <td><button @click="handleDelete(book.id)">Delete</button></td>  
        </tr>  
      </tbody>  
    </table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      books: [  
        // 初始书籍数据  
        { id: 1, title: 'Book 1', author: 'Author 1', copies: 5 },  
        // ...其他书籍  
      ],  
      bookForm: {  
        id: null,  
        title: '',  
        author: '',  
        copies: 0,  
      },  
      // 假设有一个变量来控制表单验证对话框的显示  
      dialogVisible: false,  
    };  
  },  
  methods: {  
    addBook() {  
  
      const newId = this.books.length + 1;  
  
      // 添加新书到books数组  
      this.books.push({  
        id: newId,  
        title: this.bookForm.title,  
        author: this.bookForm.author,  
        copies: this.bookForm.copies,  
      });  
  
      // 重置表单  
      this.bookForm = {  
        id: null,  
        title: '',  
        author: '',  
        copies: 0,  
      };  
  
      // 假设这里没有对话框需要关闭，因为我们是直接在表单提交时处理添加逻辑  
      // 如果有对话框，你需要设置 dialogVisible = false 来关闭它  
    },  
    handleDelete(id) {  
      // 从books数组中删除具有指定ID的书籍  
      this.books = this.books.filter(book => book.id !== id);  
    },  
  },  
};  
</script>